<treetable-submenu></treetable-submenu>

<div class="content-section introduction">
    <div>
        <span class="feature-title">TreeTable - <span class="subitem">Column Resize</span></span>
        <span>Columns can be resized using drag drop by setting the resizableColumns to true. There are two resize modes; "fit" and "expand". Fit is the default one and 
            the overall table width does not change when a column is resized. In "expand" mode, table width also changes along with the column width.</span>
    </div>
</div>

<div class="content-section implementation">
    <h3 class="first">Fit Mode</h3>
    <p-treeTable [value]="files1" [columns]="cols" [resizableColumns]="true">
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th *ngFor="let col of columns" ttResizableColumn>
                    {{col.header}}
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
            <tr>
                <td *ngFor="let col of columns; let i = index">
                    <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
                    {{rowData[col.field]}}
                </td>
            </tr>            
        </ng-template>
    </p-treeTable>

    <h3>Expand Mode</h3>
    <p-treeTable [value]="files2" [columns]="cols" [resizableColumns]="true" columnResizeMode="expand">
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th *ngFor="let col of columns" ttResizableColumn>
                    {{col.header}}
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
            <tr>
                <td *ngFor="let col of columns; let i = index">
                    <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
                    {{rowData[col.field]}}
                </td>
            </tr>            
        </ng-template>
    </p-treeTable>

    <h3>Scrollable</h3>
    <p-treeTable [value]="files3" [columns]="cols" [scrollable]="true" scrollHeight="200px" [resizableColumns]="true">
        <ng-template pTemplate="colgroup" let-columns>
            <colgroup>
                <col *ngFor="let col of columns" >
            </colgroup>
        </ng-template>
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th *ngFor="let col of columns" ttResizableColumn>
                    {{col.header}}
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
            <tr>
                <td *ngFor="let col of columns; let i = index">
                    <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
                    {{rowData[col.field]}}
                </td>
            </tr>            
        </ng-template>
    </p-treeTable>

    <h3>Scrollable with Variable Width</h3>
    <p-treeTable [value]="files3" [columns]="cols" [scrollable]="true" scrollHeight="200px" [resizableColumns]="true">
        <ng-template pTemplate="colgroup" let-columns>
            <colgroup>
                <col *ngFor="let col of columns" [style.width]="col.width">
            </colgroup>
        </ng-template>
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th *ngFor="let col of columns" ttResizableColumn>
                    {{col.header}}
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
            <tr>
                <td *ngFor="let col of columns; let i = index">
                    <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
                    {{rowData[col.field]}}
                </td>
            </tr>            
        </ng-template>
    </p-treeTable>
</div>

<div class="content-section documentation">
    <p-tabView effect="fade">
        <p-tabPanel header="treetablecolresize.ts">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/treetable/treetablecolresize.ts" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-typescript" pCode ngNonBindable>
export class TreeTableColResizeDemo &#123;

    files1: TreeNode[];

    files2: TreeNode[];

    files3: TreeNode[];

    files4: TreeNode[];

    cols: any[];

    constructor(private nodeService: NodeService) &#123; &#125;

    ngOnInit() &#123;
        this.nodeService.getFilesystem().then(files => this.files1 = files);
        this.nodeService.getFilesystem().then(files => this.files2 = files);
        this.nodeService.getFilesystem().then(files => this.files3 = files);
        this.nodeService.getFilesystem().then(files => this.files4 = files);

        this.cols = [
            &#123; field: 'name', header: 'Name', width: '50%' &#125;,
            &#123; field: 'size', header: 'Size', width: '30%' &#125;,
            &#123; field: 'type', header: 'Type', width: '20%' &#125;,
        ];
    &#125;
&#125;
</code>
</pre>   
        </p-tabPanel>

        <p-tabPanel header="treetablecolresize.html">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/treetable/treetablecolresize.html" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;h3 class="first"&gt;Fit Mode&lt;/h3&gt;
&lt;p-treeTable [value]="files1" [columns]="cols" [resizableColumns]="true"&gt;
    &lt;ng-template pTemplate="header" let-columns&gt;
        &lt;tr&gt;
            &lt;th *ngFor="let col of columns" ttResizableColumn&gt;
                &#123;&#123;col.header&#125;&#125;
            &lt;/th&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns"&gt;
        &lt;tr&gt;
            &lt;td *ngFor="let col of columns; let i = index"&gt;
                &lt;p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"&gt;&lt;/p-treeTableToggler&gt;
                &#123;&#123;rowData[col.field]&#125;&#125;
            &lt;/td&gt;
        &lt;/tr&gt;            
    &lt;/ng-template&gt;
&lt;/p-treeTable&gt;

&lt;h3&gt;Expand Mode&lt;/h3&gt;
&lt;p-treeTable [value]="files2" [columns]="cols" [resizableColumns]="true" columnResizeMode="expand"&gt;
    &lt;ng-template pTemplate="header" let-columns&gt;
        &lt;tr&gt;
            &lt;th *ngFor="let col of columns" ttResizableColumn&gt;
                &#123;&#123;col.header&#125;&#125;
            &lt;/th&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns"&gt;
        &lt;tr&gt;
            &lt;td *ngFor="let col of columns; let i = index"&gt;
                &lt;p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"&gt;&lt;/p-treeTableToggler&gt;
                &#123;&#123;rowData[col.field]&#125;&#125;
            &lt;/td&gt;
        &lt;/tr&gt;            
    &lt;/ng-template&gt;
&lt;/p-treeTable&gt;

&lt;h3&gt;Scrollable&lt;/h3&gt;
&lt;p-treeTable [value]="files3" [columns]="cols" [scrollable]="true" scrollHeight="200px" [resizableColumns]="true"&gt;
    &lt;ng-template pTemplate="colgroup" let-columns&gt;
        &lt;colgroup&gt;
            &lt;col *ngFor="let col of columns" &gt;
        &lt;/colgroup&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="header" let-columns&gt;
        &lt;tr&gt;
            &lt;th *ngFor="let col of columns" ttResizableColumn&gt;
                &#123;&#123;col.header&#125;&#125;
            &lt;/th&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns"&gt;
        &lt;tr&gt;
            &lt;td *ngFor="let col of columns; let i = index"&gt;
                &lt;p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"&gt;&lt;/p-treeTableToggler&gt;
                &#123;&#123;rowData[col.field]&#125;&#125;
            &lt;/td&gt;
        &lt;/tr&gt;            
    &lt;/ng-template&gt;
&lt;/p-treeTable&gt;

&lt;h3&gt;Scrollable with Variable Width&lt;/h3&gt;
&lt;p-treeTable [value]="files3" [columns]="cols" [scrollable]="true" scrollHeight="200px" [resizableColumns]="true"&gt;
    &lt;ng-template pTemplate="colgroup" let-columns&gt;
        &lt;colgroup&gt;
            &lt;col *ngFor="let col of columns" [style.width]="col.width"&gt;
        &lt;/colgroup&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="header" let-columns&gt;
        &lt;tr&gt;
            &lt;th *ngFor="let col of columns" ttResizableColumn&gt;
                &#123;&#123;col.header&#125;&#125;
            &lt;/th&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns"&gt;
        &lt;tr&gt;
            &lt;td *ngFor="let col of columns; let i = index"&gt;
                &lt;p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"&gt;&lt;/p-treeTableToggler&gt;
                &#123;&#123;rowData[col.field]&#125;&#125;
            &lt;/td&gt;
        &lt;/tr&gt;            
    &lt;/ng-template&gt;
&lt;/p-treeTable&gt;
</code>
</pre>
        </p-tabPanel>
    </p-tabView>
</div>